import React from 'react'

const Info = () =>
{
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    //初始化路由参数对象
    const [searchParams] = React.$Router.useSearchParams()
    const [cateid, SetCateId] = React.useState(searchParams.get('cateid'))

    // 获取cookie
    let Cookie = React.$Cookies.load('LoginUser',{path:'/'}) ? JSON.parse(React.$Cookies.load('LoginUser',{path:'/'})) : {}

    // 设置状态
    const [info,setInfo] = React.useState({})
    const [prev,setPrev] = React.useState({})
    const [next,setNext] = React.useState({})
    const [collection,setCollection] = React.useState(false)
    const [LoginUser,setLoginUser] = React.useState(Cookie)

    const location = React.$Router.useLocation()

    const [CollectionIndex,setCollectionIndex] = React.useState('')

    React.useEffect(() => {

        const name = location.state ? location.state.name : ''

        setCollectionIndex(name)

        getInfoData()
    },[])

    const onBack = () =>
    {
        if(CollectionIndex === 'collection')
        {
            navigate(-1)
        }else{
            navigate('/category/category/index')
        }
    }

    const getInfoData = async () => {
        let data = {
            cateid:cateid
        }

        if(JSON.stringify(LoginUser) !== '{}')
        {
            data.busid = LoginUser.id ? LoginUser.id : 0
        }

        let result = await React.$Api.CateInfo(data)

        if(result.code === 1)
        {
            setInfo(result.data.info)
            setPrev(result.data.prev)
            setNext(result.data.next)

            if(result.data.collection)
            {
                setCollection(true)
            }
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
                onClose:() => {
                    navigate(-1)
                }
            })

            return false
        }
    }

    const confirm = async () =>
    {
        let data = {
            cateid:cateid,
            busid:LoginUser.id
        }

        let result = await React.$Api.CollectionConfirm(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {
                    setCollection(true)
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    const cancel = async () =>
    {
        let data = {
            cateid:cateid,
            busid:LoginUser.id
        }

        let result = await React.$Api.CollectionCancel(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {
                    setCollection(false)
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    const PrevCate = () =>
    {
        let ToPrev = () =>
        {
            SetCateId(prev.id)
            navigate('/category/category/info?cateid=' + prev.id)
            navigate(0)
        }

        if(prev)
        {
            return  (
                <>
                    <p>上一篇：<a onClick={ToPrev}>{prev.name}</a></p>
                </>
            )
        }else{
            return (
                <p>上一篇：已经到顶了</p>
            )
        }
    }

    const NextCate = () =>
    {
        let ToNext = () =>
        {
            SetCateId(next.id)
            navigate('/category/category/info?cateid=' + next.id)
            navigate(0)
        }

        if(next)
        {
            return  (
                <>
                    <p>下一篇：<a onClick={ToNext}>{next.name}</a></p>
                </>
            )
        }else{
            return (
                <p>下一篇：已经是最后一篇</p>
            )
        }
    }

    const Collection = () => {
        if(JSON.stringify(LoginUser) !== '{}')
        {
            if(collection)
            {
                return (
                    <div className="niming_sq niming_sq_xs_xq" onClick={cancel}>
                        <a> 
                            <React.$Icon.Star  />已收藏
                        </a>
                    </div>
                )
            }else{
                return (
                    <>
                        <div className="niming_sq niming_sq_xs_xq" onClick={confirm}>
                            <a> 
                                <React.$Icon.StarO  />收藏
                            </a>
                        </div>
                    </>
                )
            }
        }
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title={info.name}
                    zIndex="10"
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="rem2"></div>
            <div className="xs_Xiangq">
                <div className="bt">
                    <h2>{info.name}</h2>
                    <div className="text">
                        <span>{info.createtime_text}</span>
                        <span>文章作者：{info.nickname}</span>
                    </div>
                </div>

                <div className="wom_de" dangerouslySetInnerHTML={{__html:info.description}}></div>

                <Collection />
            </div>

            <div className="rem2"></div>
            <div className="shangxia_piab">
                <PrevCate />
                <NextCate />
            </div>
        </>
    )
}

export default Info